<!--
 * @Author: vectorwings
 * @Email: vectorwings@163.com
 * @GitHub: https://github.com/vector-wings/
 * @Company: Copyright 2019 HuaZhuTech, Inc.
 * @Date: 2019-10-24 13:51:02
 * @LastEditors: vectorwings
 * @LastEditTime: 2019-10-25 22:49:32
 * @Description: 任务台账-详情页面-问题记录
 -->

<template>
  <div class="listTemplate">
    <div class="t-body">
    <mu-container ref="container" class="demo-loadmore-content">
      <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
        <mu-list>
          <section  v-for="(i,index) in data" :key="index">
            <mu-paper :z-depth="2">
              <div class="card" >
                <section class="tit">
                  <span class="lan-btn no-bg default">{{i.problemLevel | levels}}</span><!--问题类型-->
                  <span class="tag-question">{{i.status | translate}}</span><!--整改类型-->
                </section>
                <!--tag-question-->
                <div class="t-con" @click="problemDetail(i)">
                  <div class="outline">
                    <span class="outline_name">检查部位：</span>
                    <span class="outline_con">{{i.checkParts || '---'}}</span>
                  </div>
                  <div class="outline">
                    <span class="outline_name">问题描述：</span>
                    <span class="outline_con">{{i.problemDescription || '---'}}</span>
                  </div>
                  <section class="card-label-level-2">
                    <div class="outline">
                      <span class="outline_name">整改期限：</span>
                      <span class="outline_con">{{i.endTime || '---'}}</span>
                    </div>
                  </section>
                  <section>
                    <div class="outline">
                      <span class="outline_name">检查人：</span>
                      <span class="outline_con">{{i.checkUserName || '---'}}</span>
                    </div>
                  </section>
                </div>
                <div v-if="state"  class="lan-card-footer" style="justify-content: flex-end" >
                  <div class="lan-btn big default" @click="gotips(i)">
                    查看整改通知单
                  </div>
                </div>
              </div>
            </mu-paper>
          </section>
        </mu-list>
      </mu-load-more>
    </mu-container>
  </div>
    <NoData v-if="!data.length"/>
  </div>
</template>

<script>
  export default {
    name: 'TaskSummaryCards',
    data () {
      return{
        refreshing: false,
        loading: false,
      }
    },
    props: {
      data: Array,
      state:Boolean
    },
    filters: {
      levels(rows) {
        if(rows == 1) {
          return '一般问题'
        }else if(rows == 2) {
          return '较大问题'
        }else if(rows == 3) {
          return '重大问题'
        }else {
          return '--'
        }
      },
      translate (rows) {
        if (rows == 0) {
          return '整改中'
        } else if (rows == 1) {
          return '待复查'
        } else if (rows == 2) {
          return '已整改'
        }
      },
    },
    methods: {
      gotips(item){
        this.$router.push({
          path: '/Totips',
          query: {
            problemId: item.problemId
          }
        });
      },
      refresh () {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.$emit('fetch')
        }, 2000)
      },
      load () {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.$emit('fetch')
        }, 2000)
      },

      problemDetail (val) {
        // console.log(val);
        this.$router.push(
          {
            path: '/accountDetaildf',
            query: {
              info: val.problemId,
            }
          });
      },

      splitFirstLetter (letters) {
        if (letters !== null && letters !== undefined) {
          return letters.substr(0, 1)
        }
        return '无'
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .card {
    position: relative;
    border-bottom: 0.01rem solid #EFEFEF;
    background-color: #FFFFFF;
    margin: 0.12rem;
    box-shadow: 0px 2px 8px 0px rgba(182, 182, 182, 0.4);
    .tit {
      display: flex;
      justify-content: space-between !important;
      border-bottom: 0.01rem dashed #E0E0E0;
      padding: 0.12rem;
      .tag {
        width: fit-content;
        height: fit-content;
        padding: 0.06rem;
        background-color: red;
        border-radius: 0.02rem;
        font-size: 0.12rem;
        line-height: 0.12rem;
        color: #FFFFFF;
      }
      .tag-question {
        font-size: 0.13rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 149, 255, 1);
        line-height: 0.18rem;
      }
      .active0 {
        color: #389D2B;
      }
      .active1 {
        color: #0095FF;
      }
      .active2 {
        color: #FF8A1B;
      }
    }

    .t-con {
      padding: 0.12rem;
      section:nth-child(1) {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: fit-content;
      }
      .outline {
        padding: 0.05rem 0;
        .outline_name {
          font-size: 0.15rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(140, 140, 140, 1);
          line-height: 0.21rem;
        }
        .outline_con {
          font-size: 0.15rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(61, 61, 61, 1);
          line-height: 0.21rem;
        }
      }
      .card-label-level-2 {
        .outline {

          .outline_name {
            font-size: 0.15rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
            line-height: 0.21rem;
          }
          .outline_con {
            font-size: 0.15rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(61, 61, 61, 1);
            line-height: 0.21rem;
          }
        }
      }
    }

  }

</style>
